<template>
  <el-dialog
    title="选择门店名称"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="80%"
    @close="closeDialog"
  >
    <div class="person_content">
      <div class="group">
        <div class="mailList">
          <h3>门店视图</h3>
          <div class="group_con">
            <div class="title">
              <span
                v-for="(item, index) in headList"
                :key="index"
                @click="searchBeforLive(item.ssCode, index)"
              >
                {{ item.ssName }}
                <span>></span>
              </span>
            </div>
            <div class="searchInput">
              <el-input
                v-model="searchStr"
                placeholder="请输入门店名称"
                size="mini"
                style="width: 60%"
              ></el-input>
              <el-button type="primary" size="mini" @click="searchStaff()"
                >搜索</el-button
              >
              <el-button type="primary" size="mini" @click="RefreshList()"
                >返回首级目录</el-button
              >
            </div>
            <div v-loading="loading" class="staff_con">
              <div>
                <div v-for="(item, index) in dataList" :key="index">
                  <div class="pl-10 ">
                    <div class="text-name">
                      <span
                        v-if="item.ssCode != -1"
                        :class="item.isChooseAll ? 'del-name' : 'all-name'"
                        @click="chooseItem(item, index)"
                        >{{ item.isChooseAll ? "取消" : "全选" }}</span
                      >
                      <span
                        @click="getData(2, item, index)"
                        :class="item.isChoose ? 'choose' : ''"
                        >{{ item.ssName }}</span
                      >
                    </div>

                    <div v-if="item.sonList && item.isOpen">
                      <div
                        v-for="(item2, index2) in item.sonList"
                        :key="index2"
                      >
                        <div class="pl-20 ">
                          <div class="text-name">
                            <span
                              :class="
                                item2.isChooseAll ? 'del-name' : 'all-name'
                              "
                              @click="chooseItem(item2, index2, index)"
                              >{{ item2.isChooseAll ? "取消" : "全选" }}</span
                            >
                            <span
                              @click="getData(3, item2, index2, index)"
                              :class="item2.isChoose ? 'choose' : ''"
                              >{{ item2.ssName }}</span
                            >
                          </div>

                          <div v-if="item.sonList">
                            <div
                              v-for="(item3, index3) in item2.sonList"
                              :key="index3"
                            >
                              <div class="pl-30 ">
                                <div class="text-name">
                                  <span
                                    @click="
                                      chooseItem(item3, index3, index2, index)
                                    "
                                    :class="item3.isChoose ? 'choose' : ''"
                                  >
                                    {{ item3.ssName }}</span
                                  >
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="personnel">
        <h3>已选信息</h3>
        <div class="person_box">
          <div v-for="(item, index) in dataList" :key="index">
            <div class="pl-10 " v-if="item.isChoose">
              <div class="text-name">
                <span>{{ item.ssName }}</span>
              </div>
              <div v-if="item.sonList">
                <div v-for="(item2, index2) in item.sonList" :key="index2">
                  <div class="pl-20 " v-if="item2.isChoose">
                    <div class="text-name">
                      <span>{{ item2.ssName }}</span>
                    </div>
                    <div v-for="(item3, index3) in item2.sonList" :key="index3">
                      <div class="pl-30 " v-if="item3.isChoose">
                        <div class="text-name">
                          <span
                            @click="chooseItem(item3, index3, index2, index)"
                          >
                            {{ item3.ssName }}</span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="person_box">
          <el-tag
            v-for="(tag, index) in upperStory"
            :key="index"
            closable
            @close="handleClose(index)"
          >
            <el-tooltip class="item" effect="dark" placement="bottom">
              <div slot="content">
                城市编号：{{ tag.cityCode }}<br /><br />
                城市名称：{{ tag.cityName }}<br /><br />
                ssCode：{{ tag.ssCode }}<br /><br />
                名称：{{ tag.ssName }}
              </div>
              <el-button>{{ tag.ssName }}</el-button>
            </el-tooltip>
          </el-tag>
        </div> -->
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" size="mini">取消</el-button>
      <el-button type="primary" @click="submit()" size="mini">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      inputVal: "",
      groupVal: "",
      staffList: [], // 通讯录一级
      searchStr: "", //查询内容
      storeTreeList: [], //监控门店类型树结构数据
      storeSecongTreeList: [], //门店名称树结构数据(二级)
      roleList: [],
      checked: false, //checkbox的值
      personList: [], // 最后到人的list
      upperStory: [],
      staffIds: [], // 发送人数组id
      headList: [], // 头部返回上一层
      loading: false,
      deleteIdList: [], // 批量删除数组
      staffNameOrId: "", // 搜索id,
      sendName: "",
      //树结构方法
      defaultProps: {
        children: "children",
        label: "ssName"
      },
      count: 1,
      dataList: [],
      checked: false
    };
  },
  activated() {},
  methods: {
    chooseItem(item, index, index2, index3) {
      if (item.level == 1) {
        if (this.dataList[index].isChooseAll) {
          this.dataList[index].isChooseAll = false;
          this.dataList[index].isChoose = false;
          // this.dataList[index].sonList = [];
        } else {
          this.dataList[index].isChooseAll = true;
          this.dataList[index].isChoose = true;

          // this.dataList[index].sonList = [];
        }
        let list = this.dataList[index].sonList;
        if (list && list.length > 0) {
          for (let x in list) {
            list[x].isChoose = false;
            list[x].isChooseAll = false;
            if (list[x].sonList && list[x].sonList.length > 0) {
              for (let y in list[x].sonList) {
                list[x].sonList[y].isChoose = false;
                list[x].sonList[y].isChooseAll = false;
              }
            }
          }
        }
      }
      if (item.level == 2) {
        let list = this.dataList[index2].sonList[index];

        if (list.sonList && list.sonList.length > 0) {
          console.info("---有子--");
          list.sonList = [];

          if (this.dataList[index2].sonList[index].isChooseAll) {
            console.info("二级全部取消");
            this.dataList[index2].sonList[index].isChooseAll = false;
            this.dataList[index2].sonList[index].isChoose = false;
          } else {
            console.info("二级全部选中");
            this.dataList[index2].sonList[index].isChooseAll = true;
            this.dataList[index2].sonList[index].isChoose = true;
          }
        } else {
          if (this.dataList[index2].sonList[index].isChoose) {
            console.info("二级全部取消");
            this.dataList[index2].sonList[index].isChoose = false;
            this.dataList[index2].sonList[index].isChooseAll = false;
            this.checkisChoose(1, index2);
          } else {
            console.info("二级全部选中");

            if (!this.dataList[index2].isChoose) {
              this.dataList[index2].isChoose = true;
            }

            this.dataList[index2].sonList[index].isChoose = true;
            console.info(this.dataList[index2]);
            this.dataList[index2].sonList[index].isChooseAll = true;
          }
        }
        this.checkisChoose(1, index2);
      }
      if (item.level == 3) {
        if (!this.dataList[index3].sonList[index2].sonList[index].isChoose) {
          this.dataList[index3].isChoose = true;
          this.dataList[index3].sonList[index2].isChoose = true;
          this.dataList[index3].sonList[index2].sonList[index].isChoose = true;

          let count = 0;
          let thisLen = this.dataList[index3].sonList[index2].sonList.length;
          for (let x in this.dataList[index3].sonList[index2].sonList) {
            let item = this.dataList[index3].sonList[index2].sonList[x];
            if (item.isChoose) {
              count++;
            }
          }
          console.info("count:" + count);
          if (count == thisLen) {
            this.dataList[index3].sonList[index2].isChooseAll = true;
          }
        } else {
          this.dataList[index3].sonList[index2].sonList[index].isChoose = false;
          //判断当前父节点是否还有
          let count = 0;
          for (let x in this.dataList[index3].sonList[index2].sonList) {
            let item = this.dataList[index3].sonList[index2].sonList[x];
            if (item.isChoose) {
              count++;
            }
          }
          if (count == 0) {
            this.dataList[index3].sonList[index2].isChoose = false;
            this.dataList[index3].sonList[index2].isChooseAll = false;
          }
          this.checkisChoose(1, index3);
        }
      }
      // this.list.push(item);
      // console.log(this.list)
    },
    checkisChoose(level, index) {
      let count = 0;
      let isTrue = true;
      if (level == 1) {
        for (let x in this.dataList[index].sonList) {
          let item = this.dataList[index].sonList[x];
          if (!item.isChoose) {
            // count++;
            this.dataList[index].isChooseAll = false;
            isTrue = false;
            break;
          }
        }
        if (isTrue) {
          this.dataList[index].isChooseAll = true;
          this.dataList[index].isChoose = true;
        }
      }

      if (level == 2) {
      }
    },
    initData() {
      let list = this.upperStory;
      for (let c in list) {
        let item = list[c];
        for (let x in this.dataList) {
          let item1 = this.dataList[x];
          if (item == item1.ssCode) {
          }
        }
      }
    },
    getData(level, item, index, index2, str) {
      console.info(level, item, index, index2);
      if (!str) {
        if (level == 2) {
          let sonlist = this.dataList[index].sonList;
          if (sonlist && sonlist.length > 0) {
            console.info("=====已有数据====");
            // this.dataList[index].sonList = [];
            this.dataList[index].isOpen
              ? (this.dataList[index].isOpen = false)
              : (this.dataList[index].isOpen = true);
            return;
          }
        }

        if (level == 3) {
          let sonlist = this.dataList[index2].sonList[index].sonList;
          if (sonlist && sonlist.length > 0) {
            console.info("--清空3级数据");
            this.dataList[index2].sonList[index].sonList = [];
            return;
          }
        }
      }

      let that = this;
      let thisData = {
        level: level
      };

      if (str) {
        thisData["searchStr"] = str.trim();
      } else {
        if (item && item.ssCode) {
          thisData["pId"] = item.ssCode;
        }
      }
      this.$http({
        url: this.$http.adornUrl(`cpcpstorestafflink/getChannelTypeByLevel`),
        method: "get",
        params: this.$http.adornParams(thisData)
      }).then(({ data }) => {
        // console.log(data, "datatree");
        if (data.code === 0) {
          if (level == 1) {
            for (let x in data.data) {
              data.data[x]["sonList"] = [];
              data.data[x].isChooseAll = false;
              data.data[x].isChoose = false;
              data.data[x].isOpen = true;
            }
            that.dataList = data.data;
          }
          if (level == 2) {
            let list = data.data;
            console.info("第二级", list);

            if (str) {
              this.dataList = this.dataList.splice(0, 1);
              this.dataList[0].ssName = "搜索结果";
              this.dataList[0].ssCode = "-1";
            }

            for (let x in list) {
              list[x].isChooseAll = false;
              list[x].isChoose = false;
              list[x].isOpen = true;
              list[x]["sonList"] = [];
            }
            that.dataList[index].sonList = list;
          }
          if (level == 3) {
            let list = data.data;
            for (let x in list) {
              list[x].isChooseAll = false;
              list[x].isChoose = false;
              list[x].isOpen = true;
            }
            that.dataList[index2].sonList[index]["sonList"] = list;
          }
          console.info(that.dataList);
        }
      });
    },
    //选中的tree结构
    //点击取消
    closeDialog() {
      this.dialogVisible = false;
      this.checked = false;
    },
    // 初始
    init(name, menDianTreeData) {
      console.log(menDianTreeData);
      this.sendName = name;
      this.dialogVisible = true;
      //   this.fetchStaffList();
      this.getData(1);
      this.headList = [];
      this.personList = [];
      this.storeTreeList = [];
      this.storeSecongTreeList = [];
      this.staffNameOrId = "";
      this.searchStr = "";
      // this.upperStory = [];
      //重新判断了this.upperStory的值
      if (menDianTreeData.length === 0) {
        this.upperStory = [];
      } else {
        this.upperStory = menDianTreeData;
      }
    },
    //活动名称树结构(一级)
    // 查看下面分组通讯录
    watchGroup(ssCode, ssName, level) {
      console.log("ssCode=", ssCode);
      console.log("ssName=", ssName);
      console.log("level=", level);
      let obj = {};
      obj.ssName = ssName;
      obj.ssCode = ssCode;
      this.headList.push(obj);
      //判断了点击二级目录时候ssCode和ssName是否相等
      if (ssCode === ssName) {
        this.getSecondStoreTree(ssCode);
      }

      this.getThereStoreTree(ssCode);
      // this.fetchTwoSatfflist(id);
    },
    // 人员提示文字
    toplicText(item) {
      let company = item.orgFullName;
      let orgName = item.orgName;
      if (company) {
        if (company.indexOf("中国电信股份有限公司") === 0) {
          company = company.substring(10, company.length);
        }
        let strLength = company.length - orgName.length;
        company = company.substring(0, strLength);
        return company;
      } else {
        return null;
      }
    },
    // 删除人员标签
    handleClose(index) {
      this.upperStory.splice(index, 1);
      if (this.checked === true) {
        this.checked = false;
      }
    },
    // 搜索人员
    searchStaff() {
      if (this.searchStr == "") {
        this.$message.error("请输入搜索内容");
        return false;
      }

      this.getData(2, this.dataList[0], 0, null, this.searchStr);
      return;

      this.$http({
        url: this.$http.adornUrl(`cpcpstorestafflink/getChannelTypeByLevel`),
        method: "get",
        params: this.$http.adornParams({
          level: 2,
          searchStr: this.searchStr
        })
      }).then(({ data }) => {
        if (data.code === 0) {
          this.storeTreeList = [];
          this.storeSecongTreeList = data.data;

          for (let x in data.data) {
            data.data[x].isChooseAll = false;
            data.data[x].isChoose = false;
            data.data[x].isOpen = false;
            data.data[x]["sonList"] = [];
          }
          console.info(data.data);

          let list = this.dataList.splice(0, 1);
          console.info(list);
          list[0].sonList = data.data;
          console.info(list[0].sonList);
          list[0].ssName = "搜索结果";
          list[0].isOpen = true;
          list[0].isChooseAll = false;
          list[0].isChoose = false;

          for (let x in list) {
            list[x].isChooseAll = false;
            list[x].isChoose = false;
            list[x].isOpen = true;
          }

          console.info(list);
          this.dataList = list;
          console.info(this.dataList);

          if (data.data.length === 0) {
            this.$message({
              message: "暂无搜索结果！",
              type: "warning"
            });
          }
        }
      });
    },
    // 选择人
    handleCheckedCitiesChange(cityCode, cityName, level, pid, ssCode, ssName) {
      if (level == 2) {
        this.getThereStoreTree(ssCode);
      } else {
        let obj = {};
        let flag = 0;
        if (this.checked === true) {
          this.$message({
            message: "您已选择所有人员，不能再进行选择",
            type: "warning"
          });
          flag = 1;
          return false;
        }
        this.upperStory.map(item => {
          if (item.ssCode.split(",")[0] === ssCode) {
            this.$message({
              message: "您已选择过该成员",
              type: "warning"
            });
            flag = 1;
            return false;
          }
        });
        if (flag === 0) {
          obj.cityCode = cityCode;
          obj.cityName = cityName;
          obj.level = level;
          obj.pid = pid;
          obj.ssCode = ssCode;
          obj.ssName = ssName;
          this.upperStory.push(obj);
        }
      }
    },
    // 点击刷新
    RefreshList() {
      this.getData(1);
    },

    // 确定
    submit() {
      let list = [];
      list1: for (let x in this.dataList) {
        let item = this.dataList[x];
        // if (item.ssCode == -1) {
        //   continue list1;
        // }
        if (item.isChooseAll && item.ssCode != -1) {
          list.push(item);
          continue list1;
        }

        list2: for (let c in item.sonList) {
          let item2 = item.sonList[c];
          if (item2.isChooseAll) {
            list.push(item2);
            continue list2;
          }
          // if (item2.isChoose) {
          //   list.push(item2);
          // }
          list3: for (let d in item2.sonList) {
            let item3 = item2.sonList[d];
            if (item3.isChooseAll) {
              list.push(item3);
              continue list3;
            }
            if (item3.isChoose) {
              list.push(item3);
            }
          }
        }
      }
      console.info(list.length);
      console.info(list);
      if (list.length == 0) {
        this.$message({
          message: "未选择门店视图",
          type: "warning"
        });
        return;
      }

      this.dialogVisible = false;

      this.upperStory = list;

      this.$emit("fetchPersonId", this.upperStory);
    }
  }
};
</script>

<style scoped>
.text-name {
  cursor: pointer;
}
.text-name:hover {
  color: #3e8ef7;
}
.text-name .all-name {
  background: #3e8ef7;
  color: #fff;
  padding: 2px 6px;
  text-align: center;
  font-size: 12px;
  border-radius: 4px;
}
.text-name .del-name {
  background: #f56c6c;
  color: #fff;
  padding: 3px 6px;
  text-align: center;
  font-size: 12px;
  border-radius: 4px;
}
.pl-10 {
  padding-left: 40px;
}
.pl-20 {
  padding-left: 40px;
}
.pl-30 {
  padding-left: 40px;
}
.el-dialog__body {
  padding: 0 20px;
}
.person_content {
  display: flex;
}
.el-tag {
  height: 30px;
}
.el-tag button {
  background: transparent;
  border: 0;
}
.group {
  width: 60%;
}
.group div {
  width: 100%;
  box-sizing: border-box;
}
.group div h3 {
  width: 100%;
  text-align: center;
}
.staff_con {
  width: 100% !important;
  height: 460px;
  overflow-y: auto;
}
.group_con {
  width: 50%;
  height: 600px;
  padding: 10px;
  border: 1px solid #dedede;
}
.group_con ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.group_con li {
  cursor: pointer;
}
.group_con p:hover {
  background: #3e8ef7;
  color: #fff;
}
.personnel {
  margin: 0 20px;
  width: 40%;
}
.personnel h3 {
  text-align: center;
}
.input {
  width: 83% !important;
}
.el-checkbox-group {
  padding-left: 40px !important;
}
.title {
  line-height: 40px;
  font-weight: bold;
  font-size: 20px;
  min-height: 0;
}
.searchInput {
  margin: 10px 0;
}
.title > span {
  cursor: pointer;
}
.title > span:last-child span {
  display: none;
}
.person_box {
  border: 1px solid #dedede;
  display: inline-block;
  width: 100%;
  height: 600px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px;
}
.person_box > span {
  margin: 2px 6px;
}
.group_li {
  padding: 0 !important;
  line-height: 30px;
  height: 546px;
  overflow-y: scroll;
}
.group_li li {
  padding-left: 40px !important;
}
.group_li li:hover {
  background: #3e8ef7;
  color: #fff;
}
.person_list li {
  line-height: 32px;
  padding-left: 40px;
}
.person_list li:hover {
  background: #3e8ef7;
  color: #fff;
}
.list_con {
  width: 100%;
}

.text-name {
  cursor: pointer;
  padding: 3px 6px;
  height: 26px;
  line-height: 26px;
}
.this-bg {
  padding: 3px 6px;
}
.choose {
  background: #3e8ef7;
  color: white;
  padding: 3px 6px;
  border-radius: 4px;
}
.clean {
  background: #f56c6c;
  color: white;
  border-radius: 4px;
  padding: 3px 6px;
}
</style>
